<template>
  <div class='container'>
    <!-- 头部信息 -->
    <div class="info">
      <div>【题型】：{{ $parent.$parent.changeType(questionsList.questionType) }}</div>
      <div>【编号】：{{questionsList.id}}</div>
      <div>【难度】：{{changeDifficulty(questionsList.difficulty)}}</div>
      <div>【标签】：{{questionsList.tags}}</div>
      <div>【学科】：{{questionsList.subjectName}}</div>
      <div>【目录】：{{questionsList.directoryName}}</div>
      <div>【方向】：{{questionsList.direction}}</div>
    </div>
    <hr>
    <!-- 题干 -->
    <div class="main">
      <p>【题干】：</p>
      <p style="color:blue">{{questionsList.question}}</p>
      <p>{{ $parent.$parent.changeType(questionsList.questionType) }} 选项：（以下选中的选项为正确答案）</p>
      <el-form>
        <el-form-item>
          <!-- 单选1 -->
          <div v-if="+questionsList.questionType === 1">
          <el-radio  v-for="item in questionsList.options" readonly :key="item.id" v-model="radio" :label="item.isRight"  >{{item.title}}</el-radio>
          </div>
          <!-- 多选2 -->
          <div v-else-if="+questionsList.questionType === 2" >
          <el-checkbox v-for="item in questionsList.options" readonly :key="item.id" :checked="item.isRight" >{{item.title}}</el-checkbox>
          </div>
          <!-- 简答3 -->
          <div v-else>
          <p >简答 </p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <!-- 底部 -->
    <div class="footer">
      <div>
        <span>【参考答案】：</span> <el-button type="danger" @click="showPlay = !showPlay">视频答案预览</el-button>
        <br>
        <video v-if="showPlay" :src="questionsList.videoUrl" autoplay muted controls>
        </video>
      </div>
      <hr>
      <div>
       <span>【参考答案】：</span> <el-link :href="questionsList.remarks" target="_blank" type="info">{{questionsList.answer}}</el-link>
      </div>
      <hr>
      <div>
       <span>【题目备注】：</span> <el-link target="_blank" type="info">{{questionsList.remarks}}</el-link>
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close">
    <el-button type="primary" @click="$parent.$parent.dialogVisible = false">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questionsPreview',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      radio: 1,
      showPlay: false,
      questionsList: []
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      // console.log(this.id)
      const res = await detail({ id: this.id, isNext: false })
      // console.log(res)
      if (res.status !== 200) return
      // this.$nextTick()
      this.questionsList = res.data
      console.log(this.questionsList.videoURL)
    },
    // 题目难度转换
    changeDifficulty (value) {
      if (+value === 1) return '简单'
      if (+value === 2) return '一般'
      if (+value === 3) return '困难'
    }
  }
}
</script>

<style scoped lang='scss'>

.info div {
  display: inline-block;
  width: 215px;
  margin-bottom: 20px;
}
.el-radio,
.el-checkbox{
  display: block;
  margin: 20px;
}
.footer div {
  margin: 20px;
}
.close{
  text-align: right;
}
.el-form-item {
  // 屏蔽所有事件
   pointer-events: none;
}
video{
  margin-top: 20px;
}
</style>
